<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/xadmin/css/font.css">
    <link rel="stylesheet" href="/static/xadmin/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/apublic.css">
    <script src="/static/xadmin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/xadmin/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/xadmin/html5.min.js"></script>
    <script src="/static/xadmin/respond.min.js"></script>
    <![endif]-->
    <script src="/static/until.js" charset="utf-8"></script>
    <script>
        if(!sessionStorage.getItem('token')) window.top.location.href='/login.html';
    </script>
    <style>
        .layui-icon-close{
            cursor:pointer;
        }
        .layui-icon-close:hover{
            color:red;
        }
        textarea{
            width:100%;
            height:50px;
            box-sizing:border-box;
            padding:10px;
        }
        #L_image_sh{
            margin-top:10px;
        }
        #L_image_sh img{
            margin-right:2px;
            margin-top:2px;
            width:48%;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="myform" lay-filter="myform">
            <div class="layui-form-item">
                <label for="L_title" class="layui-form-label"><span class="x-red">*</span>标题</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_title" name="title" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_storecustomclass" class="layui-form-label"><span class="x-red">*</span>店家分类</label>
                <div class="layui-input-inline" style="display:flex;">
                    <input type="text" autocomplete="off" class="layui-input" readonly id="L_storecustomclass_sh">
                    <input type="hidden" id="L_storecustomclass_hd" name="custom_id" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    <a href="javascript:;" onclick="xadmin.open('选择分类','../storecustomclass/check.html?id='+getQueryString('id'))" class="layui-btn layui-btn-xs" id="check_pid">选择</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_price" class="layui-form-label"><span class="x-red">*</span>价格</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_price" name="price" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_num" class="layui-form-label"><span class="x-red">*</span>库存</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_num" name="num" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_status" class="layui-form-label"><span class="x-red">*</span>状态</label>
                <div class="layui-input-inline">
                    <input type="radio" name="status" value="1" title="编辑" checked>
                    <input type="radio" name="status" value="2" title="发布" >
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_status" class="layui-form-label">详情</label>
                <div class="layui-input-inline">
                    <textarea name="content"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_status" class="layui-form-label">商品图片</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="test1" style="margin-top:3px; width:100%;">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <div id="L_image_hd"></div>
                    <div id="L_image_sh"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_create_at" class="layui-form-label"><span class="x-red">*</span>创建时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_create_at" name="create_at" required="" lay-verify="required" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_update_at" class="layui-form-label"><span class="x-red">*</span>更新时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_update_at" name="update_at" required="" lay-verify="required" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <input type="hidden" name="id"/>
                <input type="hidden" name="spec_id">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="filter_btn" lay-submit="">修改</button></div>
        </form>
    </div>
</div>
<script>
    var detail_url="/goods/detail"
    var add_url="/goods/edit"
    var upload_url=baseUrl+"/upload/index"
    var spec_img_index=0
    var spec_img_class_name="spec_img_class_name_"
    layui.use(['form', 'layer','jquery','laydate','upload'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //监听提交
            form.on('submit(filter_btn)', function(data) {
                //发异步，把数据提交给php
                u_post(add_url,data.field,function(res){
                    if(res.status.errorCode==0) {
                        layer.msg("成功",{time:1000})
                        window.parent.table.reload('mytable',{});
                    }
                    else{
                        layer.alert(res.status.msg, {icon: 5})
                    }
                });
                return false;
            });

            //date
            layui.laydate.render({elem: '#L_create_at',type: 'datetime',trigger: 'click'});
            layui.laydate.render({elem: '#L_update_at',type: 'datetime',trigger: 'click'});

            //上传
            layui.upload.render({
                elem: '#test1' //绑定元素
                ,url: upload_url //上传接口
                ,headers:{token:sessionStorage.getItem('token')}
                ,multiple: 'true'
                ,accept:"file"
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.closeAll('loading');
                    if(res.status.errorCode==0){
                        spec_img_index++
                        $("#L_image_hd").append("<input type='hidden' name='image["+spec_img_index+"]' value='"+res.data.url+"' class='"+spec_img_class_name+spec_img_index+"'>")
                        $("#L_image_sh").append("<img src='"+res.data.url+"&w=200"+"' class='"+spec_img_class_name+spec_img_index+"' onclick='del_spec_img(\""+spec_img_class_name+spec_img_index+"\")'>")
                    }
                    else{
                        layer.msg(res.status.msg)
                    }
                }
            });

            u_post(detail_url,{id:getQueryString("id")},function(res){
                if(res.status.errorCode==0) {
                    var newData={}
                    for (var key in res.data)
                    {
                        if(key=="create_at"||key=="delete_at"||key=="update_at")
                            newData[key]=utc2datetime(res.data[key])
                        else if(key=="custom_id"){
                            if(res.data[key]) setparent(res.data["store_custom_class"].id,res.data["store_custom_class"].title)
                            else setparent(0,"无")
                        }
                        else if(key=="goods_content"){
                            newData['content']=res.data[key].content
                        }
                        else
                            newData[key]=res.data[key]

                        if(key=="goods_spec" && res.data[key].length>0){
                            newData['spec_id']=res.data[key][0].id
                            newData['price']=res.data[key][0].price
                            newData['num']=res.data[key][0].num
                            for(i=0;i<res.data[key][0].goods_image.length;i++){
                                spec_img_index++
                                $("#L_image_hd").append("<input type='hidden' name='image[]' value='"+res.data[key][0].goods_image[i].image+"' class='"+spec_img_class_name+spec_img_index+"'>")
                                $("#L_image_sh").append("<img src='"+res.data[key][0].goods_image[i].image+"&w=200"+"' class='"+spec_img_class_name+spec_img_index+"' onclick='del_spec_img(\""+spec_img_class_name+spec_img_index+"\")'>")
                    
                            }
                           
                        } 
                    }
                    form.val("myform", newData);
                }
                else{
                    layer.alert(res.status.msg, {icon: 5})
                }
            });
        });

        function setparent(id,title){
            if(id&&title){
                $("#L_storecustomclass_hd").val(id);
                $("#L_storecustomclass_sh").val(title);
                return true;
            }
            else return false;
        }
        function del_spec_img(classname){
            $("."+classname).remove()
        }
</script>

</body>

</html>
